import "./App.css";
import { useEffect, useState } from "react";
import { Button, Tag, Radio, Input, message } from "antd";
import { agreementDisposes } from "@/utils/index";

const { TextArea } = Input;

const App = () => {
  // 文本域值
  const [textAreaValue, setTextAreaValue] = useState("");

  // radio 的 change 事件
  const radioChange = (e) => {
    setTextAreaValue(agreementDisposes[e.target.value]);
  };

  const copyText = () => {
    const text = textAreaValue;
    navigator.clipboard
      .writeText(text)
      .then(() => {
        console.log("Text copied to clipboard");
        message.success("复制指令成功!");
      })
      .catch((error) => {
        message.error("复制指令失败!");
      });
  };

  return (
    <>
      <div className="app_wrap">
        <div className="tag_box">
          <Radio.Group
            size="large"
            defaultValue="a"
            buttonStyle="solid"
            onChange={radioChange}
          >
            <Radio.Button value="2061">2061</Radio.Button>
            <Radio.Button value="2062">2062</Radio.Button>
            <Radio.Button value="2063">2063</Radio.Button>
            <Radio.Button value="2064">2064</Radio.Button>
          </Radio.Group>
        </div>
        <div className="value_box">
          <TextArea
            style={{
              height: 300,
            }}
            rows={4}
            maxLength={100}
            value={textAreaValue}
            placeholder="请选择编号"
          />
          <div className="copy_btn_box">
            <Button style={{}} type="primary" size="large" onClick={copyText}>
              复制指令
            </Button>
          </div>
        </div>
      </div>
    </>
  );
};

export default App;
